<template>
    <div class="component-contrastList">
        <van-checkbox-group v-model="checkedList" ref="checkboxGroup">
            <div class="contrastList-content">
                <div class="contrast-item" v-for="(item,index) in list" :key="index">
                    <van-checkbox shape="square" :name="item">{{item.examName}}</van-checkbox>
                    <p>考试时间：{{item.examEndTime|formatDateTime}}</p>
                    <p>答题时长：{{(item.answerUseTime /60).toFixed(2)}}分钟</p>
                    <p>考试时限：{{item.answerTimeLimit/60}}分钟</p>
                    <p>满分：{{item.fullScore || 0}}分</p>
                    <p>成绩：{{item.studentScore ||0}}分</p>
                    <p @click="show(item)">成绩分析单：查看详情</p>
                </div>
            </div>
        </van-checkbox-group>
    </div>
</template>
<script>
export default {
    name: "ContrastList",
    props: {
        list: {
            type: Array,
            default: [],
        },
        type: {
            type: Number,
            default: 1,
        },
    },

    data() {
        return {
            checkedList: [],
        };
    },
    watch: {
        checkedList(arr) {
            this.$emit("listChange", arr);
        },
    },
    methods: {
        show(data) {
            this.$router.push({
                path: "/contrast-table",
                query: {
                    examId: data.examId,
                    type: this.type,
                },
            });
        },
        checkAll() {
            this.$refs.checkboxGroup.toggleAll(true);
        },
    },
};
</script>
<style lang="scss">
.component-contrastList {
    padding: 10px 15px;
    flex: 1;
    overflow: scroll;
    display: flex;
    flex-direction: column;

    .van-checkbox__icon--checked .van-icon {
        color: #56baca;
        border-color: #56baca;
        background-color: #221f2e;
    }
    .van-checkbox__label {
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .num {
            color: #56baca;
        }
    }
    .sort-wrap {
        display: flex;
    }
    .contrastList-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .contrast-item {
        border: 1px solid #2e2c3c;
        padding: 15px 11px;
        width: 49%;
        margin-bottom: 15px;
        .van-checkbox {
            margin-bottom: 5px;
        }
        .van-checkbox__label {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        p {
            font-size: 13px;
            line-height: 1.7;
        }
    }
    .van-checkbox-group {
        flex: 1;
        overflow: scroll;
    }
}
</style>
